<template>
	<view class="logins">
		<!-- <nav-bar isBack  :title="title" ></nav-bar> -->
		<nav-bars  bgColor="#fff" fontColor="#000" :title="title"></nav-bars>
		<view class="p_design">
			<view class="p_uHeadimg"><image :src="img"></image></view>
			 <view class="p_tit">
				 <view class="p_uName" id="userName">{{names}}</view>
				 <view class="p_u" id="userName">{{tag}}</view>
			 </view>
		</view>
		<view class="card">
		    <view class="card_name">*手机号</view>
		    <input class="price_input"  placeholder="未填写" type="number" v-model="phone"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*所在城市</view>
			<biaofun-region class="bioafun" :defaultValue="defaultValue" @change="onChangeRegion"></biaofun-region> 
		    <!-- <picker @change="pickerChange" @columnchange="bindMultiPickerColumnChange" id="address" mode="region" value="">
		           <text class="av1" :class="{av2:regionStr}"> {{regionStr ||'未选择'}}</text>
		     </picker> -->
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*户型</view>
		    <picker @change="bindPickerChange" :range="bedroom">
				<text class="av1" :class="{av2:house_type}">{{house_type ||'未选择'}}</text>
			</picker>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*建筑面积</view>
			<text class="rightx">m²</text>
		    <input class="price_input" style="padding-right: 50rpx;"  placeholder="未填写" type="number" v-model="house_area"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*房屋类型</view>
		    <picker @change="bindPicker"  :range="array">
				<text class="av1" :class="{av2:room_type}">{{room_type ||'未选择'}}</text>
			</picker>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*装修预算</view>
			<text class="rightx">万元(含设计费)</text>
		    <input class="price_input" style="padding-right: 200rpx;"  placeholder="未填写" type="number" v-model="renovate_budget"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="cards">
		    <view class="card_name">需求描述(选填) <text>{{remark.length}}/1000</text></view>
			<view style="margin: 0 30rpx;"><textarea v-model="remark" maxlength="1000" placeholder="描述您的需求吧~"/></view>
		</view>
		<view class="cards">
		    <view class="card_name">户型图(选填)<text>{{imgnum}}/9</text></view>
			 <view>
				<imgUpload :count="count" @obtain_img="obtain_img" :list="img_list" :name="name" :header="header" :url="url"></imgUpload>
			</view>	
		</view>
		
		<view @click="submitAddress" class="bnt">确认下单</view>
	</view>
</template>

<script>
// import navBar from "@/components/navBar/navBar.vue"
import imgUpload from '@/components/linzq-imgUpload/linzq-imgUpload.vue'
import biaofunRegion from '@/pages_design/components/biaofun-region/biaofun-region.vue';
import service_design from '@/service/design'
import URL from '@/config/url.js'


export default {
	components: {imgUpload,biaofunRegion},
	
	data() {
		return {
			title:'填写装修信息',
			regionStr: '',
			province: '',
			city:'',
			area:'',
			province_id:'',
			city_id:'',
			district_id:'',
			house_type:'',
			house_area:'',
			room_type:'',
			renovate_budget:'',
			phone:'',
			remark:'',
			house_thumb_url:'',
			bedroom:["一室","二室","三室","四室","五室及以上","复式","别墅"],
			array:["精装","毛坯房","小平房","自建房"],
			count: 9,
			name: 'file',   //必填
			url: URL.ENTER_UPLOAD_IMAGE,  
			header: {
				 access_token:'',
				'content-type': 'application/json',
				 user_id:''
			},
		    img_list:[],
			is_default: '0',
			showCitySel: false,
			designerId:'',
			img:'',
			tag:'',
			names:'',
			imgnum:0,
			decorationId:'',
			defaultValue: ['广西壮族自治区', '桂林市', '叠彩区'], // 默认值
			share_id:'',
		}
	},
	onLoad(option) {
		this.$utils.getUrl()
		this.designerId = option.designerId
		this.decorationId = option.decorationId
		this.img = option.img
		this.tag = option.tag
		this.names = option.name
		if(option.share_id && option.share_id!=''){
			this.share_id=option.share_id
		}
	},
	onShareAppMessage(res) {
		let that = this
		if (res.from === 'button') {}
		return {
			title: this.designerId,
			path: '/pages_design/pages/design/order/add?designerId=' + this.designerId + '&img=' + this
						.img + '&tag=' + this.tag + '&name=' + this.names+'&share_id='+this.share_uid,
			success: function(res) {}
		}
	},
	onShareTimeline(res) {
		if (res.from === 'menu') {}
		return {
			title: this.designerId,
			imageUrl: this.img,
			path: '/pages_design/pages/design/order/add?designerId=' + this.designerId + '&img=' + this
						.img + '&tag=' + this.tag + '&name=' + this.names+'&share_id='+this.share_uid,
			success: function(res) {
				
			}
		};
	},
	methods: {
		obtain_img(data) {
			this.img_list = data
			this.imgnum = data.length
		},
		// pickerChange(t) {
		// 	this.province_id= t.detail.code[0],
		// 	this.city_id = t.detail.code[1],
  //           this.district_id= t.detail.code[2],
		// 	this.province = t.detail.value[0],
		// 	this.city= t.detail.value[1],
		// 	this.area = t.detail.value[2],
		// 	this.regionStr = t.detail.value.join(" ")
		// },
		onChangeRegion(region) {
			this.province = region[0].name,
			this.city= region[1].name,
			this.area = region[2].name,
			this.province_id = region[0].id,
			this.city_id = region[1].id,
			this.district_id = region[2].id
		},
		bindPickerChange: function(e) {
			this.house_type = this.bedroom[e.target.value]
		},
		bindPicker: function(e) {
			this.room_type = this.array[e.target.value]
		},
		// 设计师下单
		submitAddress() {
			if(!this.province){
			  	this.province = this.defaultValue[0],
			  	this.city= this.defaultValue[1],
			  	this.area = this.defaultValue[2],
				this.province_id = '450000',
				this.city_id = '450300',
				this.district_id = '450303'
			}
			if (!this.house_type) return uni.showToast({title: "请选择户型", icon: "none"});
			if (!this.house_area) return uni.showToast({title: "请输入面积", icon: "none"});
			if (!this.room_type) return uni.showToast({title: "请选择房屋类型", icon: "none"});
			if (!this.renovate_budget) return uni.showToast({title: "请输入预算", icon: "none"});
			if (!this.phone) return uni.showToast({title: "请填写号码", icon: "none"});
			if (!this.isPhone(this.phone)) return uni.showToast({title: "号码格式不对", icon: "none"});
			if (!this.province) return  uni.showToast({title: "请填写地址", icon: "none"});
			let imgid = []
			this.img_list.forEach(v => {
					imgid.push(v.id)
			})
			imgid = imgid.join()
			uni.showLoading('正在下单中...')
            service_design.getcartadd({
					designer_id: this.designerId?this.designerId:0,
					decoration_id:this.decorationId?this.decorationId:0,
					type:this.decorationId?2:1,
					province_id:this.province_id,
					city_id:this.city_id,
					district_id:this.district_id,
					province:this.province,
					city:this.city,
					district:this.area,
					house_type: this.house_type,
					house_area: this.house_area,
					room_type:this.room_type,
					renovate_budget:this.renovate_budget,			
					phone: this.phone,
					remark:this.remark,
					house_thumb_url:imgid,
					share_uid:this.share_id //分享用户
		        }).then(res => {
				uni.hideLoading();
				if(res.code == 1){
					let orderid = res.data.order_no
					var t = this;
					uni.showModal({
					    title: "提示！",
						content: "下单成功",
						showCancel: !0,
						confirmText: "知道了",
						showCancel:false,
						confirmColor: "#87ceeb",
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					            	url: '/pages_design/pages/design/order/sucess?orderid=' + orderid +'&type=1',
					            });
					        } 
					    }
					});	
				}else{
		          uni.showToast({
		            title: res.msg,
		            icon: "none"
		          });
				}
			}).catch(err=>{
				
			})
		},
		isPhone(t) {
		        return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
		 },
		radioChange(t) {
			if(t.currentTarget.dataset.checked == 0){
				this.is_default = 1
			}else{
				this.is_default = 0
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.logins{
		width: 100%;height: 100%;background: #fff;display: flex;flex-flow: column;
	}
.p_design{
	background: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	box-shadow: 4rpx 4rpx 10rpx 4rpx rgba(0, 0, 0, 0.1);
	padding-left: 160rpx;
	min-height: 160rpx;
	position: relative;
	.p_uHeadimg{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border:5rpx #FFD425 solid;
		position: absolute;
		top:20rpx;
		left: 20rpx;
		background: #f9f9f9;
		overflow: hidden;
	}
	.p_tit{
		padding: 10rpx 0;
	}
	.p_uName{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.p_u{
		font-size: 26rpx;
		color: #939393;
	}
	
}	
.card {
	    padding: 10rpx;
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    margin: 20rpx;
		position: relative;
	}
	
	.card_name {
	    flex-shrink: 0;
	    padding-right: 60rpx;
	}
	
	.price_input {
	    width: 100%;
	    font-size: 28rpx;
		text-align: right;
	}
	picker{
		width: 100%;
		text-align: right;
	}
	.cell_c,.cell navigator {
	    margin: 20rpx;
	    padding: 20rpx 0 20rpx 20rpx;
	    font-size: 32rpx;
	    display: flex;
	    align-items: center;
	}
	
	.cell_c picker {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		line-height: 25px;
		padding-left: 54rpx;
		height: 46rpx;
		text-align: left;
	}
	
	.cell_name {
	    flex-shrink: 0;
	}
	
	.line {
	    padding: 10rpx;
	    background-color: #f6f6f6;
	}
	
	.radio-cell {
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #999;
	}
	
	.bnt {
	    background-color: #C3AB7C;
	    color: #fff;
		
	}
	
	.bnt,.bnt-delete {
	    padding: 20rpx 20rpx;
	    margin: 20rpx;
	    text-align: center;
	    border-radius: 40rpx;
	}
	
	.bnt-delete {
	    background-color: #f6f6f6;
	}
.cards{
	padding: 10rpx 0;
	background-color: #fff;
	margin: 20rpx 0;
	.card_name{
		padding: 0 30rpx;
		text{
			float: right;
			color: #999;
		}
	}
	textarea{
		width: 100%;
		margin: 20rpx 0;
		background: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		height: 240rpx;
	}
}
.rightx{
	position: absolute;
	right: 30rpx;
	top: 10rpx;
}
.av1{
	color: #888;
}
.av2{
	color: #333;
}
.bioafun{
	width:100%;
}
.bioafun .ellipsis-1{
	text-align: right;
}
</style>